<template>
	<view class="content display displayColumn displaycenter_aliem  width-100">
		<u-navbar @rightClick="rightClick" :autoBack="true"  :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title" >油价管理</text>
			</template>
		</u-navbar>
		
		<view class="fn_all display  displayColumn displaycenter_jus M-T30" >
			<view class="item_one display  width-100 displaycenter_aliem " v-if="false">
				<span class="fn_nnm1 M-L24">所属加油站</span>
				
				<view class="display displaycenter_aliem">
					<view class="display all_item   M-R24" :class="{fn_xxs4:selectIndex1==0,fn_xxs5:selectIndex==1}" @click="selectIndex1=0">
						<span class="fn_nnm2" :style="{color:selectIndex1==0?'#FFF':'#72778A'}">全部加油站</span>
					</view>
					<view class="display all_item  M-R24" :class="{fn_xxs4:selectIndex1==1,fn_xxs5:selectIndex1==0}" @click="changeIndex(1)">
						<span class="fn_nnm2" :style="{color:selectIndex1==1?'#FFF':'#72778A'}">请选择加油站</span>
					</view>
				</view>
			</view>
			<view class="liness M-L24 M-T24" v-if="false">
				
			</view>
			<view class="item_one display  width-100 displaycenter_aliem M-T24" v-if="false">
				<span class="fn_nnm1 M-L24">选择油号</span>
				<view class="changesSele display  displaycenter_aliem M-R24">
					<block v-for="(item,index) in arr" :key="index">
						<view class="ones display  all_item" :style="{border:selectIndex==index?'1rpx solid #126BC9' :'1rpx solid #7a7a7a'  }" @click="selectIndex=index">
							<view class="fn_sidfs display " v-if="selectIndex==index">
								
							</view>
						</view>
						<span class="fn_jiuwu" style="margin-left: 8rpx;">{{item}}</span>
					</block>
				</view>
			</view>
			<view class="liness M-L24 M-T24" v-if="false">
				
			</view>
			<view class="item_one display  width-100 displaycenter_aliem M-T24" v-if="false">
				<span class="fn_nnm1 M-L24">选择类型</span>
				<view class="changesSele display  displaycenter_aliem M-R24">
					<block v-for="(item,index) in arr1" :key="index">
						<view class="ones display  all_item" :style="{border:selectIndex2==index?'1rpx solid #126BC9' :'1rpx solid #7a7a7a'  }" @click="selectIndex2=index">
							<view class="fn_sidfs display " v-if="selectIndex2==index">
								
							</view>
						</view>
						<span class="fn_jiuwu" style="margin-left: 8rpx;">{{item}}</span>
					</block>
				</view>
			</view>
			<view class="liness M-L24 M-T24" v-if="false">
				
			</view>
			<view class="item_one display  width-100 displaycenter_aliem M-T24" v-if="false">
				<span class="fn_nnm1 M-L24">油号状态</span>
				<view class="M-R24">
					<u-switch  v-model="value1" activeColor="#00E166"  ></u-switch>
				</view>
			</view>
			<view class="liness M-L24 M-T24" v-if="false">
				
			</view>
			<view class="item_four display width-100 M-T24 displayColumn " style="text-align: left;">
				<span class="shichang M-L24">市场价格</span>
				<input type="text" class="fn_input M-L24 M-T24" v-model="shichnagJIage" placeholder-class="fn_input1" placeholder="请输入"/>
			</view>
			
			<view class="item_four display width-100 M-T24 displayColumn " style="text-align: left;">
				<span class="shichang M-L24">油站价格</span>
				<input type="text" class="fn_input M-L24 M-T24" v-model="youjiage"  placeholder-class="fn_input1" placeholder="请输入"/>
			</view>
			<view class="item_four display width-100 M-T24 displayColumn " style="text-align: left;">
				<span class="shichang M-L24">会员价格</span>
				<input type="text" class="fn_input M-L24 M-T24" v-model="huiyuanjiage" placeholder-class="fn_input1" placeholder="请输入"/>
			</view>
			<view class="item_four display width-100 M-T24 displayColumn " style="text-align: left;" @click="show=true" v-if="false">
				<span class="shichang M-L24">生效时间</span>
				<input type="text" disabled="true"  class="fn_input M-L24 M-T24" v-model="sehngxiaoshijain" placeholder-class="fn_input1" placeholder="年/月/日 --:--"/>
			</view>
		</view>
		<u-popup :show="flag" mode="bottom" round="20" :safeAreaInsetBottom="false">
			<view class="display  popup_all displayColumn">
				<view class="title_delete display displaycenter_aliem ">
					<span @click="closeOpen" class="cancles">取消</span>
					<span class="fontSize font_comm lingqu_txt">选择加油站</span>
					<!-- <uni-icons class="delete_icon " style="z-index: 1000000;" type="closeempty" size="24"
						></uni-icons> -->
					<span @click="submitus" class="submits">确定</span>
				</view>
				<scroll-view class="display displayColumn" scroll-y="true" style="height: 800rpx;"
					@scrolltolower="scrolltolower" lower-threshold="50">
					<!-- 隔离 -->
					<view class="display " style="width: 100%;height: 72rpx;"></view>
					<view class="one display  all_item" v-for="(item,index) in addressArr" :key="index">
						<detailsVue @fatherMethod="fatherMethod" :item="item"></detailsVue>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-datetime-picker
		                :show="show"
		                v-model="value2"
		                mode="date"
						@cancel="show=false"
						@confirm="confirm"
		        ></u-datetime-picker>
		<view class="width-100  fn_nulls display  all_item" >
			<button class="fn_btn_bottoms" @click="add">保存</button>
		</view>
	</view>
</template>

<script>
	import detailsVue from './details.vue';
	export default {
		components:{
			detailsVue
		},
		data() {
			return {
				shichnagJIage:'',//市场价格
				youjiage:'',//油价价格
				huiyuanjiage:'',//会员价格
				sehngxiaoshijain:'',//生效时间
				value1:false,
				petrolName:'',//油品名称
				value2:'',
				flag:false,
				stationId:'',
				stationName:'',
				addressArr:[],
				arr: ['#92', '#95', '#98', '#0'],
				arr1: ['柴油','汽油'],
				selectIndex:0,
				show:false,
				selectIndex1:0,
				selectIndex2:0,
				value1: Number(new Date()),
				ids:'',
				priceId:''
			}
		},
		onLoad(options) {
			this.ids = options.id
			console.log(this.ids)
			this.getStatins()
			this.getxiangqing();
		},
		methods: {
			getxiangqing(){
				this.$req.get(`/xcx/petrolProduct/getProductInfo/${this.ids}`).then(res=>{
					console.log(res)
					let mresda = res.data.data;
					this.shichnagJIage=mresda.marketPrice;
					this.youjiage=mresda.stationPrice;
					this.huiyuanjiage = mresda.memberPrice;
					this.stationId = mresda.stationId
					this.stationName = mresda.stationName
					this.petrolName = mresda.petrolName
					this.priceId = mresda.priceId
				})
			},
			confirm(e){
				console.log(e)
				this.sehngxiaoshijain = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.value2 = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				console.log(this.value2)
				this.show=false
			},
			changeIndex(index){
				this.flag=true;
				this.selectIndex1=1
			},
			closeOpen(){
				this.flag = false;
			},
			closeOpen() {
				this.flag = false;
			},
			submitus() {
			
				this.flag = false;
			},
			add(){
				if(this.shichnagJIage==''){
					this.$modal.msg('市场价格不能为空');
					return false
				}
				if(this.youjiage==''){
					this.$modal.msg('油站价格不能为空');
					return false
				}
				if(this.huiyuanjiage==''){
					this.$modal.msg('会员价格不能为空');
					return false
				}
				// if(this.sehngxiaoshijain==''){
				// 	this.$modal.msg('生效时间不能为空');
				// 	return false
				// }
				let id = ''
				let name = ''
				this.addressArr.forEach(item=>{
					if(item.stationName==this.nameStation){
						id = item.id;
						name = item.stationName
					}
				})
				let data = {
					// petrolUseStatus:this.value1?0:1,//启用状态（0：启用，1：禁用）
					// petrolType:this.selectIndex2==0?1:0,//油品类型（0：汽油，1：柴油）
					stationId:this.stationId,
					stationName:this.stationName,
					petrolId:`${this.ids}`,//油号id
					priceId:this.priceId,
					petrolName:this.petrolName,//油号
					marketPrice:this.shichnagJIage,//市场价
					stationPrice:this.youjiage,//油站价
					memberPrice:this.huiyuanjiage,//会员价
					// effectiveTime:this.sehngxiaoshijain,//生效时间
				}
				console.log(data)
				this.$modal.loading('加载中');
				this.$req.post('/xcx/PetrolPrice',data).then(res=>{
					console.log(res)
					this.$modal.closeLoading()
					if(res.data.code==200){
						this.$modal.msg('新增成功');
						setTimeout(()=>{
							uni.navigateBack();
						},500)
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getStatins() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						let data = {
							lng: res.longitude,
							lat: res.latitude
						}
						that.$req.get('/xcx/petrolStation/getAllStations', data).then(res => {
							console.log(res)
							res.data.data.forEach(item => {
								that.$set(item, 'flag', false)
							})
							that.addressArr = res.data.data;
							console.log(that.addressArr)
						})
					}
				});
			
			},
			fatherMethod(e) {
				console.log(e,'1');
				this.nameStation = e;
				for (let i = 0; i < this.addressArr.length; i++) {
					if (this.addressArr[i].stationName == e) {
						this.addressArr[i].flag = !this.addressArr[i].flag;
						if (this.addressArr[i].flag) {
							this.nameSelect = i;
							for (let j = 0; j < this.addressArr.length; j++) {
								if (i != j) {
									this.addressArr[j].flag = false;
								}
							}
						} else {
							for (let m = 0; m < this.addressArr.length; m++) {
								if (this.addressArr[m].flag) {
									this.nameSelect = m;
			
								}
							}
						}
					}
				}
			
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.popup_all {
		width: 100%;
		height: 800rpx;
	
		.title_delete {
			position: absolute;
			width: 100%;
			height: 32rpx;
			background: #fff;
			top: 40rpx;
			justify-content: center;
			justify-content: space-around;
			.lingqu_txt {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				justify-self: center;
			}
	
			.delete_icon {
				position: absolute;
				// justify-self: flex-end;
				right: 40rpx;
			}
		}
	
		.one {
			width: 100%;
			height: 120rpx;
		}
	}
.fn_all{
	width: 690rpx;
	// height: 264rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.cancles {
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
		z-index: 1111;
	}
	.submits {
		font-weight: 600;
		font-size: 28rpx;
		color: #126BC9;
		z-index: 111;
	}
.fn_jiuwu{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.fn_nulls{
	position: fixed;
	bottom: 108rpx;
}
.fn_btn_bottoms{
	width: 690rpx;
	height: 66rpx;
	background: #126BC9;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.ones{
	width: 36rpx;
	height: 36rpx;
	
	border-radius: 50%;
}
.fn_sidfs{
	width: 24rpx;
	height: 24rpx;
	background: #126BC9;
	border-radius: 50%;
}
.fn_nnm1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_nnm2{
	font-weight: 400;
	font-size: 24rpx;
	// color: #72778A;
}
.item_one{
	justify-content: space-between;
}
.liness{
	width: 642rpx;
	height: 0rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 1rpx solid #F6F6F6;
}
.fn_shichangjia{
	font-weight: 600;
	font-size: 24rpx;
	color: #126BC9;
}
.fn_shichangjia1{
	font-weight: 400;
	font-size: 24rpx;
	color: #212121;
}
.three_one1{
	width: 178rpx;
	height: 15rpx;
	background: rgba(18,107,201,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_input{
	font-weight: 400;
	font-size: 24rpx;
	color: #000;
	padding-left: 24rpx;
	width: 642rpx;
	height: 64rpx;
	background: #F6F6F6;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.fn_input1{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.shichang{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_xxs4{
	width: 152rpx;
	height: 50rpx;
	background: #126BC9;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.fn_xxs5{
	width: 152rpx;
	height: 50rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	border: 2rpx solid #72778A;
	// background: #fff;
}
</style>
